<template>
  <section class='f-income'>
    <van-tabs class="f-tabs" v-model:active="active" swipeable background="#f3f3f3" @click-tab="clickTab">
      <van-tab title="账户">
        <header class="f-header">
          <section class="f-card">
            <div style="font-size: 12px;color: #FFFFFF;padding: 14px;padding-bottom:0">
              <span class="f-mr-10">账户余额(元)</span>
              <van-icon v-show="accountForm.show" name="closed-eye" @click="accountForm.show = false" />
              <van-icon v-show="!accountForm.show" name="eye-o" @click="accountForm.show = true" />
            </div>
            <p class="f-price">{{ accountForm.show? '****': toThousands(accountForm.leftFee / 10000, 3) }}</p>
            <div class="f-money">
              <div>
                <p>累计充值</p>
                <p class="f-mt-10" style="font-size: 12px;">
                  {{ accountForm.show? '****': toThousands(accountForm.chargeTotal / 10000, 3) }}
                </p>
              </div>
              <div>
                <p>累计消费</p>
                <p class="f-mt-10" style="font-size: 12px;">
                  {{ accountForm.show? '****': toThousands(accountForm.usedTotal / 10000, 3) }}</p>
              </div>
            </div>
          </section>
          <section class="f-entrance">
            <div @click="pageJump('accountRecharge')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail03.png" alt="">
              <span class="f-ml-10">充值记录</span>
            </div>
            <div @click="pageJump('accountConsume')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail04.png" alt="">
              <span class="f-ml-10">消费明细</span>
            </div>
          </section>
        </header>

        <p style="font-size: 14px;color: #000000;padding:30px 0 10px 17px">收费项目</p>
        <section class="f-table">
          <div class="f-table-head">
            <p style="width:100px">项目</p>
            <p style="width:190px">条件说明</p>
            <p>价格</p>
          </div>

          <ul class="f-table-body">
            <li>
              <p style="width:90px">基础订单生成</p>
              <p class="f-ml-10" style="width:180px">订单进入系统扣除0.05元</p>
              <p class="f-ml-10">0.05元/单</p>
            </li>
            <li>
              <p style="width:90px">基础订单发货</p>
              <p class="f-ml-10" style="width:180px">订单发货扣除0.05元</p>
              <p class="f-ml-10">0.05元/单</p>
            </li>
            <li>
              <p style="width:90px">自动生产对接</p>
              <p class="f-ml-10" style="width:180px">对接运营商下单接口自动提交订单</p>
              <p class="f-ml-10">技术评估</p>
            </li>
          </ul>
        </section>
      </van-tab>
      <van-tab title="收益">
        <header class="f-header">
          <section class="f-card" style="background: linear-gradient(17deg, #3273F4, #5FA4F3)">
            <div style="font-size: 12px;color: #FFFFFF;padding: 14px;padding-bottom:0">
              <span class="f-mr-10">累计收益总额(元)</span>
              <van-icon v-show="earningFrom.show" name="closed-eye" @click="earningFrom.show = false" />
              <van-icon v-show="!earningFrom.show" name="eye-o" @click="earningFrom.show = true" />
            </div>
            <p class="f-price">{{ earningFrom.show? '****': toThousands(earningFrom.total) }}</p>
            <div class="f-money">
              <div>
                <p>可提现余额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ earningFrom.show? '****': toThousands(earningFrom.rest) }}</p>
              </div>
              <div>
                <p>冻结金额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ earningFrom.show? '****': toThousands(earningFrom.freezen) }}</p>
              </div>
              <div>
                <p>已提现总额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ earningFrom.show? '****': toThousands(earningFrom.withdraw) }}</p>
              </div>
            </div>
          </section>
          <section class="f-entrance">
            <div @click="pageJump('earning')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail01.png" alt="">
              <span class="f-ml-10">收益明细</span>
            </div>
            <div @click="pageJump('earningWithdraw')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail02.png" alt="">
              <span class="f-ml-10">提现明细</span>
            </div>
          </section>
        </header>

        <div style="padding:30px 17px 10px 17px" class="f-flex-between">
          <p style="font-size: 14px;color: #000000;">供应商账户</p>
          <p @click="openPicker('选择供应商')">
            <span class="f-mr-05">{{supplierName || '全部供应商'}}</span>
            <van-icon name="arrow-down" />
          </p>
        </div>
        <section class="f-table">
          <div class="f-table-head">
            <p style="width:110px">供应商</p>
            <p style="width:65px">可提现</p>
            <p style="width:65px">冻结</p>
            <p style="width:65px">已提现</p>
            <p>累计收益</p>
          </div>

          <ul class="f-table-body">
            <li v-for="(item,index) in earningList" :key="index">
              <p style="width:100px">{{item.shopName}}</p>
              <p class="f-ml-10 bbsl" style="width:65px" @click="toTixian(item.shopId)">{{ toThousands(item.rest) }}</p>
              <p style="width:65px">{{ toThousands(item.freezen) }}</p>
              <p style="width:65px">{{ toThousands(item.withdraw) }}</p>
              <p>{{ toThousands(item.total) }}</p>
            </li>
            <li class="f-flex-ct" v-if="!earningList.length">暂无供应商信息</li>
          </ul>
        </section>
      </van-tab>
      <van-tab title="分润">
        <header class="f-header">
          <section class="f-card" style="background: linear-gradient(17deg, #FF7F20, #FABA6E);">
            <div style="font-size: 12px;color: #FFFFFF;padding: 14px;padding-bottom:0">
              <span class="f-mr-10">累计分润总额(元)</span>
              <van-icon v-show="benefitForm.show" name="closed-eye" @click="benefitForm.show = false" />
              <van-icon v-show="!benefitForm.show" name="eye-o" @click="benefitForm.show = true" />
            </div>
            <p class="f-price">{{ benefitForm.show? '****': toThousands(benefitForm.total) }}</p>
            <div class="f-money">
              <div>
                <p>可提现余额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ benefitForm.show? '****': toThousands(benefitForm.rest) }}</p>
              </div>
              <div>
                <p>冻结金额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ benefitForm.show? '****': toThousands(benefitForm.freezen) }}</p>
              </div>
              <div>
                <p>已提现总额</p>
                <p class="f-mt-10" style="font-size: 12px;">{{ benefitForm.show? '****': toThousands(benefitForm.withdraw) }}</p>
              </div>
            </div>
          </section>
          <section class="f-entrance">
            <div @click="pageJump('benefit')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail06.png" alt="">
              <span class="f-ml-10">分润明细</span>
            </div>
            <div @click="pageJump('benefitWithdraw')">
              <img style="width:25px;height:25px" src="@/assets/icons/jhh_icon_detail05.png" alt="">
              <span class="f-ml-10">提现明细</span>
            </div>
          </section>
        </header>

        <div style="padding:30px 17px 10px 17px" class="f-flex-between">
          <p style="font-size: 14px;color: #000000;">分销商账户</p>
          <p @click="openPicker('选择分销商')">
            <span class="f-mr-05">{{consumerName || '全部分销商'}}</span>
            <van-icon name="arrow-down" />
          </p>
        </div>
        <section class="f-table">
          <div class="f-table-head">
            <p style="width:110px">分销商</p>
            <p style="width:65px">可提现</p>
            <p style="width:65px">冻结</p>
            <p style="width:65px">已提现</p>
            <p>累计分润</p>
          </div>

          <ul class="f-table-body">
            <li v-for="(item,index) in benefitList" :key="index">
              <p style="width:100px">{{item.shopName}}</p>
              <p class="f-ml-10" style="width:65px">{{ toThousands(item.rest) }}</p>
              <p style="width:65px">{{ toThousands(item.freezen) }}</p>
              <p style="width:65px">{{ toThousands(item.withdraw) }}</p>
              <p>{{ toThousands(item.total) }}</p>
            </li>
            <li class="f-flex-ct" v-if="!benefitList.length">暂无分销商信息</li>
          </ul>
        </section>
      </van-tab>
    </van-tabs>

    <van-popup v-model:show="showPicker" closeable position="bottom" close-icon-position="top-left">
      <p class="f-popup-title">{{pickerName}}</p>

      <van-picker ref="pickerRef" v-model="selectShopId" :columns="pickerName == '选择供应商'? mySupplierList: myConsumerList"
        :columns-field-names="customFieldName" :show-toolbar="false" />

      <div class="f-popup-btn">
        <van-button block type="primary" @click="handlePicker()">确定</van-button>
      </div>
    </van-popup>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getStore, toThousands } from '@/utils/utils';
import api from './api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const pickerRef = ref()

    const state = reactive({
      active: 0,
      accountForm: {},

      earningFrom: {},
      earningList: [],

      benefitForm: {},
      benefitList: [],

      showPicker: false,
      pickerName: "",
      selectShopId: [],

      consumerName: "",
      myConsumerList: [],

      supplierName: "",
      mySupplierList: [],

      customFieldName: {
        text: 'shopName',
        value: 'shopId',
        children: 'children'
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '资产总览',
        show: true,
        left: false,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      if (route.query.tabType) {
        state.active = Number(route.query.tabType)
      }

      getAccount()

      getInStatics()
      getInShopList()
      getSupplierList()

      getOutStatics()
      getOutShopList()
      getMyConsumerList()
    })

    const getAccount = () => {
      api.account().then(res => {
        console.log(res.data)
        state.accountForm = res.data
      })
    }

    const getInStatics = () => {
      let json = {
        shopId: getStore('USER_INFO').companyId
      }
      api.inStatics(json).then(res => {
        state.earningFrom = res.data
      })
    }

    const getInShopList = (relateShopId) => {
      let json = {
        "orderBy": "",
        "page": 1,
        "size": 100,
        "relateShopId": relateShopId,
        shopId: getStore('USER_INFO').companyId,
      }
      api.inShopList(json).then(res => {
        state.earningList = res.data.list
      })
    }

    const getSupplierList = () => {
      api.mySupplierList().then(res => {
        state.mySupplierList = res.data
        state.mySupplierList.unshift({
          shopName: '全部供应商',
          shopId: '',
        })
      })
    }

    const getOutStatics = () => {
      let json = {
        shopId: getStore('USER_INFO').companyId
      }
      api.outStatics(json).then(res => {
        state.benefitForm = res.data
      })
    }

    const getOutShopList = (relateShopId) => {
      let json = {
        "orderBy": "",
        "page": 1,
        "size": 100,
        "relateShopId": relateShopId,
        shopId: getStore('USER_INFO').companyId
      }
      api.outShopList(json).then(res => {
        state.benefitList = res.data.list
      })
    }

    const getMyConsumerList = () => {
      api.myConsumerList().then(res => {
        state.myConsumerList = res.data
        state.myConsumerList.unshift({
          shopName: '全部分销商',
          shopId: '',
        })
      })
    }

    const openPicker = (e) => {
      state.pickerName = e
      state.showPicker = true
    }

    const handlePicker = () => {
      let data = pickerRef.value.confirm().selectedOptions[0]
      if (state.pickerName == '选择供应商') {
        state.supplierName = data.shopName
        getInShopList(data.shopId)
      } else {
        state.consumerName = data.shopName
        getOutShopList(data.shopId)
      }
      state.showPicker = false
    }

    const clickTab = (e) => {
      if (e.name == '0') {
        getAccount()
      } else if (e.name == 1) {
        getInStatics()
        getInShopList()
      } else {
        getOutStatics()
        getOutShopList()
      }
    }

    const pageJump = (name) => {
      // 记录当前tab的状态
      router.replace({
        path: '/capital',
        query: {
          tabType: state.active
        }
      })
      setTimeout(() => {
        router.push({
          path: `/capital/${name}`
        })
      }, 100)
    }

    function toTixian(shopId) {
      router.push({ path: '/capital/tixian', query: { shopId } })
    }

    return {
      ...toRefs(state),
      pickerRef,
      toThousands,
      pageJump,
      clickTab,
      handlePicker,
      openPicker,
      toTixian,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-income {
  .f-header {
    height: 186px;
    background: #ffffff;
    border-radius: 10px;
    margin: 16px 16px 0 16px;
    .f-card {
      height: 133px;
      background: linear-gradient(17deg, #f04d4d, #f78d8d);
      border-radius: 10px;
      .f-price {
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        padding: 0px 34px;
        text-align: right;
        margin: 5px 0 10px 0;
      }
      .f-money {
        display: flex;
        margin-top: 5px;
        width: 344px;
        height: 63px;
        background: rgba(255, 255, 255, 0.05);
        padding: 13px 0;
        div {
          width: 50%;
          text-align: center;
          font-size: 10px;
          color: #ffffff;
        }
        div:not(:first-child) {
          border-left: 1px solid rgba(255, 255, 255, 0.5);
        }
      }
    }
    .f-entrance {
      display: flex;
      div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
        font-size: 14px;
      }
    }
  }
  .f-table {
    background: #ffffff;
    .f-table-head {
      display: flex;
      border-bottom: 1px solid #aaaaaa;
      padding: 10px 0;
      font-size: 10px;
      color: #666666;
      padding-left: 19px;
    }
    .f-table-body {
      li {
        display: flex;
        padding: 14px 0 14px 19px;
      }
      li:nth-child(2n) {
        background: #ececec;
      }
    }
  }
}
.bbsl {
  color: #488bfe;
  text-decoration: underline;
}
</style>